<template>
	<view class="">
		<view class="pr background">
			<u-navbar :is-back="false" :border-bottom="false" is-fixed :title="data.title||data.name" title-color="#fff"
				:background="{background:$background}">
				<view class="w20" />
				<back />
			</u-navbar>
			<view class="h100"></view>
		</view>
		<view class="p20">
			<view class="mt20 bg-fff radius20 py24 px28 flex row-between pr" style="margin-top: -70rpx;">
				<view v-for="(item,index) in releaseStatus" :key="index" class="flex w25p row-center relative">
					<view class="text-center ">
						<image :src="item.img" class="h88 w88" mode=""></image>
						<view class="fs28 color-00111d">
							{{item.name}}
						</view>
					</view>
					<view class="line absolute -right-10 top44" v-if="index<releaseStatus.length-1">
					</view>
				</view>
			</view>
			<block v-if="data.type==2">
				<view class="h20"></view>
				<itemInfo :data="data" />
			</block>
			<block v-if="data.master">
				<view class="h20"></view>
				<tchD :item="data.master"></tchD>
			</block>
			<u-form ref="uForm" label-width="auto" :label-style="{color: '#666'}">
				<view class="mt20 bg-fff radius20 pl20 pr20">
					<view v-if="!item.hide" v-for="(item,index) in data.items" :key="index" :class="item.class||''">
						<block v-if="item.field=='drugs'">
							<view class="pl10" v-for="(item2,index2) in item.child" :key="index2">
								<view class="flex row-between pt30 pb10">
									<view class="color-999">药品{{index2+1}}</view>
									<view class="flex col-bottom" style="color: #FF4444;" v-if="item.child.length>1"
										@click="click(item.childDel,index2)">
										<u-icon name="minus-circle-fill" size="34" click="db" />
										<view class="ml10">删除药品</view>
									</view>
								</view>
								<u-form-item v-for="(item3,index3) in item2" :key="index3" :label="item3.name">
									<u-input v-model="item3.value" :placeholder="'填写'+item3.name" inputAlign="right" />
								</u-form-item>
							</view>
							<view class="flex col-bottom u-border-bottom pb20 pt20" style="color: #FF704B;"
								@click="click(item.drugs_item)">
								<u-icon name="plus-circle-fill" size="34" click="db" />
								<view class="ml10">添加药品</view>
							</view>
						</block>
						<u-form-item v-else :label="item.formName" :borderBottom="item.borderBottom"
							:rightIcon="item.right?'arrow-right':''" :labelPosition="item.labelPosition||'left'">
							<view class="flex w-max" :class="{'row-right':item.inputAlign!='left'}"
								v-if="item.type=='img'">
								<imgList :width="item.width" :height="item.height" :size="item.size||180"
									:src="item.src" :max="item.max||1" :hideBor="item.hideBor"
									@success="setImg(item,$event)" />
								<view class="color-fs fs28 text-vertical ml20" v-if="item.shili"
									@click="$tool.lookImg([item.shiliSrc])">示 例</view>
							</view>
							<view class="flex w-max" :class="{'row-right':item.inputAlign!='left'}"
								v-else-if="item.type=='radio'">
								<view class="ml20" @click="click(item.radioClick,item,item2)"
									v-for="(item2,index2) in item.radioList" :key="index2">
									<view class="pe-none">
										<radio :checked="true" v-if="item.value===item2.id" class="scale7" />
										<radio :checked="false" v-else class="scale7" /><text>{{item2.name}}</text>
									</view>
								</view>
							</view>
							<u-input v-else :inputAlign="item.inputAlign||'right'" :clearable="false" :type="item.type"
								:selectOpen="item.listShow" v-model="item.value" :placeholder="item.placeholder"
								:disabled="item.disabled" @click="click(item.click,item)"
								:maxlength="item.maxlength||100" />
						</u-form-item>
						<block v-if="item.list">
							<u-select v-model="item.listShow" :list="item.list||[]" @confirm="confirm(item,$event)"
								:title="item.placeholder" mode="mutil-column-auto" :num="item.listNum||''"
								:labelName="item.labelName||''" :childName="item.childName||''"
								:valueName="item.valueName||''" />
						</block>
						<block v-if="item.field=='expect_time'">
							<u-picker mode="time" v-model="item.listShow" :params="item.timeParams"
								@confirm="confirmPicker(item,$event)" />
						</block>
					</view>
				</view>
				<view class="mt20 bg-fff radius20  px20 py24">
					<view class="color-fs">注意事项：</view>
					<view class="color-666 mt20 fs26 lh15">{{data.note}}</view>
				</view>
			</u-form>
			<view class="h180"></view>
			<view class="fixed left0 bottom0 bg-fff p20 w-max z-index2 pt20 pb10">
				<view class="flex row-center">
					<u-checkbox v-model="is" size="28" :activeColor="$zs" shape="circle" />
					<view class="color-666 fs26" id="is">我已认真阅读相关预约
						<text class="color-zs"
							@click="$u.route('/pages/public/text',{text:'service_agreement',tit:'用户服务协议'})">《服务条款同意书》</text>
					</view>
				</view>
				<view class="h20"></view>
				<u-button type="warning" ripple @click="submit">立即下单</u-button>
			</view>
		</view>
		<u-popup mode="center" v-model="noteShow" width="600" borderRadius="20">
			<view class="p40 flex-col col-center">
				<view class="fs32 fw-w pb40"></view>
				<view class="fs30" style="min-height: 80rpx;">{{data.note}}</view>
				<view class="h40"></view>
				<view class="w400">
					<u-button type="warning" ripple @click="noteShow=!noteShow">知道了</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noteShow: false,
				is: true,
				releaseStatus: [{
						name: '发起需求',
						img: '/static/img/release/fqxq.png'
					},
					{
						name: '在线支付',
						img: '/static/img/release/bj.png'
					},
					{
						name: '服务中',
						img: '/static/img/release/fwz.png'
					},
					{
						name: '完工评价',
						img: '/static/img/release/wgpj.png'
					},
				],

				data: '',

			};
		},
		onLoad(e) {
			e.type = e.type || 1
			if (e.organ_id || e.master_id) e.type = 2
			this.$params = e
			this.orderInfo()
		},
		watch: {
			hospitalShow(e) {
				this.$emit('setHospital', e)
			}
		},
		methods: {
			submit() {
				let form = {
					city_id: this.$getCache('myAdd').id || "",
					...this.$params,
				}
				if (!this.is) return this.$msg('请同意协议')
				this.data.items.map(item => {
					let value = ''
					if (item.child) {
						value = item.child.map(item2 => {
							let aa = {}
							item2.map(it3 => aa[it3.field] = it3.value)
							return aa
						})
					} else if ((item.value_id ?? '') !== '') {
						value = item.value_id
					} else {
						value = item.value
					}
					form[item.field] = value
					return form[item.field] == ''
				})
				// console.log(JSON.parse(JSON.stringify(form)));
				// return
				// if (aa)  this.$msg(aa.placeholder)
				this.$request('/member/index/createOrder', form).then(res => {
					let data = res.data
					this.$msg(res.msg)
					if (data.service_type == 0 || data.service_type == 1) {
						this.$setCache('orderList', '0')
						setTimeout(() => {
							this.$u.route({
								url: '/pages/orderList/orderList',
								type: 'switchTab'
							})
						}, 1000)
						return
					}
					this.$u.route({
						url: '/pages/index/demo/pay',
						type: 'redirect',
						params: data
					})
				})
			},
			click(fun, ...item2) {
				fun && fun(...item2)
			},
			orderInfo() {
				this.$request('/member/index/orderInfo', this.$params).then(res => {
					this.dataInit(res.data)
				})
			},
			dataInit(data) {
				if (data.note) this.noteShow = true
				this.$tool.setTit(data.title || data.name)
				console.log(data);
				data.items.forEach(item => {
					item.type = item.type || 'text' //表单类型
					item.value = item.value || '' //表单v-mode
					item.formName = item.formName || item.name || '' //
					item.value_id = item.value_id || '' //优先取
					item.disabled = item.disabled || false
					//u-select组件参数
					item.labelName = item.labelName || 'label'
					item.childName = item.childName || 'child'
					item.valueName = item.valueName || 'value'
					//end
					item.click = () => {}
					item.listShow = false //列表 是否显示
					switch (item.field) {
						case "expect_price": //期望价格
							item.placeholder = '建议价格' + data.suggested_price
							break;
						case "is_invoice": //需要发票//1是，0是
							item.type = 'radio' //单选
							item.value = 0
							item.radioList = [{
								name: '是',
								id: 1
							}, {
								name: '否',
								id: 0
							}]
							break;
						case "is_insured": //贵重药品保价服务
							item.type = 'radio' //单选
							item.value = 0
							item.radioList = [{
								name: '开启',
								id: 1
							}, {
								name: '关闭',
								id: 0
							}]
							break;
						case "medical_history":
							item.type = 'textarea'
							item.labelPosition = "top"
							item.inputAlign = "left"
							break;
						case "master_sex": //陪诊师性别
							item.type = 'select'
							item.disabled = true
							item.list = [{
								label: '不限男女',
								value: '0'
							}, {
								label: '男',
								value: 1
							}, {
								label: '女',
								value: 2
							}]
							item.click = () => {
								item.listShow = true
							}
							if (data.master?.sex) {
								item.value_id = data.master?.sex
								item.hide = true
								item.value = item.list.find(e => e.value == item.value_id)?.label
							}
							break;
						case 'drugs': //"医生"名称
							item.child = []
							item.childDel = (index2) => {
								let aa = item.child[index2].find(item2 => {
									return item2.value
								})
								if (aa) {
									this.$showModal('删除').then(res => {
										item.child.splice(index2, 1)
									})
								} else {
									item.child.splice(index2, 1)
								}
							}
							item.drugs_item = () => {
								let drugs_item = [{
										field: 'drugs_name',
										name: '名称',
										value: '',
									},
									{
										field: 'drugs_factory',
										name: '企业',
										value: '',
									},
									{
										field: 'drugs_specs',
										name: '规格',
										value: '',
									},
									{
										field: 'drugs_num',
										name: '数量',
										value: '',
									},
								]
								item.child.push(JSON.parse(JSON.stringify(drugs_item)))
							}
							item.drugs_item()
							break;
						case 'doctor': //"医生"名称
							item.hide = true
							this.$on('register_type', e => {
								if (e.value == 0) {
									item.hide = true
								} else {
									item.hide = false
								}
							})
							break;
						case 'register_type': //挂号类型
							item.type = 'radio' //单选
							item.value = 0
							// 0普通号 1专家号
							item.radioList = [{
									id: 0,
									name: '普通号',
								},
								{
									id: 1,
									name: '专家号',
								},
							]
							item.click = (item1, item2) => {
								this.$emit('register_type', item1)
							}
							break;
						case 'patient_id':
							item.right = true
							item.disabled = true
							item.click = this.set_patient
							break;
						case "relation":
							item.type = 'select'
							item.disabled = true
							item.listShow = false
							item.list = data.relation_arr.map(label => {
								return {
									label,
								}
							})
							item.click = () => {
								item.listShow = true
							}
							break;
						case 'hospital_id':
							item.type = 'select'
							item.disabled = true
							item.listShow = false
							item.list = []
							item.click = this.getHospital
							if (this.$params.hospital_id) {
								item.class = "pe-none"
							}
							break;
						case 'department': //"科室"
							item.type = 'select'
							item.disabled = true
							item.listShow = false
							item.list = []
							item.click = this.getDep
							item.listNum = item.listNum || 2
							break;
						case 'expect_time':
							item.type = 'select'
							item.disabled = true
							item.timeParams = {
								year: true,
								month: true,
								day: true,
								hour: true,
								minute: true,
								second: false
							}
							item.listShow = false
							item.click = () => item.listShow = !item.listShow
							break;
						case 'mobile':
							item.type = 'number'
							item.maxlength = 11
							break;
						case 'remarks': //服务需求
							item.type = 'textarea'
							item.labelPosition = "top"
							item.inputAlign = "left"
							item.borderBottom = false
							break;
						case 'images': //上传图片
							item.type = 'img'
							item.size = 150
							item.max = item.max || 3
							item.labelPosition = "top"
							item.inputAlign = "left"
							item.formName = ""
							break;
						case 'address_id':
							item.right = true
							item.disabled = true
							item.click = this.set_address
							break;
						case 'qr_code':
							item.type = 'img'
							item.shili = true
							item.shiliSrc = '/static/img/release/1.png'
							break;
						case 'bar_code':
							item.type = 'img'
							item.shili = true
							item.shiliSrc = '/static/img/release/2.png'
							break;
						case 'report_type':
							item.type = 'select'
							item.disabled = true
							item.listShow = false
							item.list = data.report_type_arr.map(label => {
								return {
									label,
								}
							})
							item.click = () => {
								item.listShow = true
							}
							break;
						case 'drugs_type':
							item.type = 'select'
							item.disabled = true
							item.listShow = false
							item.list = [{
								label: '非处方药',
								value: '0'
							}, {
								label: '处方药',
								value: 1
							}]
							item.click = () => {
								item.listShow = true
							}
							break;
						case 'prescription':
							item.type = 'img'
							item.size = 150
							break;

						case 'drugs_type':

							break;
						default:
							break;
					}
					if (item.type == 'radio') {
						item.radioClick = (item1, item2) => {
							item1.value = item2.id
							item.click(item1, item2)
						}
					}
					if (item.placeholder) {

					} else if (item.disabled) {
						item.placeholder = '请选择' + item.name
					} else {
						item.placeholder = '请输入' + item.name
					}
				})
				this.data = data
				console.log(JSON.parse(JSON.stringify(data.items)));
			},
			confirmPicker(item, e) {
				item.value = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},
			setImg(item, ids) {
				item.value = ids
			},
			confirm(item, event) {
				let arr = event.reverse()
				let aa = arr.find(it => it.label)
				item.value = aa.label
				item.value_id = aa.value || ''
			},
			set_address(item) { //设置地址
				uni.$off('set_address')
				uni.$once('set_address', data => {
					item.value_id = data.id
					item.value = data.name
				})
				this.$u.route('/pages/my/address/address', {
					sel: 1
				})
			},
			set_patient(item) {
				uni.$off('set_patient')
				uni.$once('set_patient', data => {
					item.value_id = data.id
					item.value = data.name
				})
				this.$u.route('/pages/my/addPatient/patientList', {
					sel: 1
				})
			},
			getHospital(item, listShow = true) {
				// console.log(item, listShow);
				if (item.list.length) return item.listShow = listShow
				let params = {
					city_id: this.$getCache('myAdd').id || "",
					type: '1', //获取科室
				}
				if (!params.city_id) {
					this.$msg('请设置城市')
					setTimeout(() => {
						this.$u.route('/pages/index/chooseAddress/chooseAddress')
					}, 1000)
					return
				}
				this.$request('/master/commom/getHospital', params).then(res => {
					item.hospital = res.data
					item.list = res.data.map(item => {
						let aa = {
							label: item.name,
							value: item.id,
						}
						return aa
					})
					item.listShow = listShow
				})
			},
			getDep(item) {
				if (item.list.length) return item.listShow = true
				this.$request('/master/commom/getDepartment').then(res => {
					item.labelName = 'name'
					item.childName = 'sub'
					// item.valueName = 'value'
					item.list = res.data.data || []
					item.listShow = true
				})
			},
		},
	}
</script>

<style lang="scss">
	.line {
		width: 70rpx;
		height: 0rpx;
		border: 1rpx dashed #72dbde;
	}

	.-right-10 {
		right: -35rpx;
	}

	.pb120 {
		padding-bottom: 200rpx;
	}
</style>
